<template>
	<view v-if="pageData" :style="{backgroundColor:pageData.bgColor,padding:pageData.margin?`0 ${pageData.margin*2}rpx`:0}">
		<view class="swiper hidden" :style="{borderRadius: pageData.radius?`${pageData.radius*2}rpx`:0}" v-if="pageData.list.length">
			<!-- 双层轮播-底层图片 -->
			<view v-if="pageData.style == 3">
				<image class="underImg p-ab" :src="$imgUrls(item.underImg)" mode="aspectFill" v-for="(item,index) in pageData.list" :key="index"
					:style="{opacity: current == index ? 1 : 0}"></image>
			</view>
			<swiper autoplay circular :interval="pageData.interval" :duration="1500" :current="current" @change="swiperChange"
				:indicator-dots="pageData.list.length > 1" indicator-color="#fff" :indicator-active-color="color" class="swiper"
				:style="{height: pageData.style == 2 ? `${fullHeight}rpx` : `${firstHeight}rpx`}">
				<swiper-item v-for="(item,index) in pageData.list" :key="index" @click="$banerGo(item)">
					<image :src="$imgUrls(item.img)" mode="aspectFill" class="wh"></image>
				</swiper-item>
				<!-- 占位元素 -->
				<image :src="pageData.style == 3 ? $imgUrls(pageData.list[0].underImg) : $imgUrls(pageData.list[0].img)" mode="widthFix" style="opacity: 0;" 
					@load="handleLoad" @click="$banerGo(pageData.list[0])"></image>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name:'Bannel',
		props:['pageData','searchData','isImmerse'],
		data() {
			return {
				fullHeight: '',
				firstHeight: '',
				current: 0
			}
		},
		onReady() {
			const { navHeight, System } = JSON.parse(uni.getStorageSync('oldbag'))
			const { screenWidth, screenHeight, safeAreaInsets, statusBarHeight } = System
			// 沉浸式
			this.fullHeight = screenHeight - safeAreaInsets.bottom
			if(this.isImmerse == 1){ // 非沉浸式
				this.fullHeight = this.fullHeight - statusBarHeight - navHeight
			}
			this.fullHeight = this.fullHeight*(750/screenWidth) - 100
		},
		methods: {
			// 占位图片载入完毕
			handleLoad(e){
				const { width, height } = e.detail
				let m = this.pageData.margin || 0
				this.firstHeight = (750 - m * 2 * 2) / (width/height)
			},
			swiperChange(e){
				let source = e.detail.source
				if(source == "autoplay" || source == "touch"){
					this.current = e.detail.current
				}
			}
		},
		computed: {
			...mapState(['color'])
		}
	}
</script>

<style lang="scss" scoped>
	.swiper,.swiper swiper-item{
		width:100%;
		position: relative;
	}
	.underImg {
		top: 0;
		left: 0;
		transition: opacity 1.5s;
	}
</style>
